<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>设备概览</title>
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="../../css/mui.css" />
		<link rel="stylesheet" href="./scancode.css" />
		<style>
			.qrcode-box:after {
				-webkit-animation: rotateAnim linear 3.68s infinite;
				animation: rotateAnim linear 3.68s infinite;
				content: '';
				position: absolute;
				display: block;
				width: 100%;
				height: 30px;
				background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(31, 162, 255, 1) 90%);
			}
			/*二维码上下移动的扫描横线*/

			@keyframes rotateAnim {
				from {
					top: 0;
				}
				to {
					top: calc(100% - 30px);
				}
			}

			@-webkit-keyframes rotateAnim {
				from {
					top: 0;
				}
				to {
					top: calc(100% - 30px);
				}
			}
			/*二维码扫描框的四角*/

			.qrcode-box span {
				width: 24px;
				height: 24px;
				position: absolute;
				border: 4px solid #1fa2ff;
			}

			.qrcode-box span:nth-child( 1) {
				left: -4px;
				top: -4px;
				border-width: 4px 0 0 4px;
			}

			.qrcode-box span:nth-child( 2) {
				right: -4px;
				top: -4px;
				border-width: 4px 4px 0 0;
			}

			.qrcode-box span:nth-child( 3) {
				right: -4px;
				bottom: -4px;
				border-width: 0 4px 4px 0;
			}

			.qrcode-box span:nth-child( 4) {
				left: -4px;
				bottom: -4px;
				border-width: 0 0 4px 4px;
			}
		</style>
	</head>

	<body>
		<button type="button" class="btn btn-primary" onclick="showPrintModal()">扫描</button>
		<div class="modal fade" id="_printModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

			<div class="modal-content">
				<div class="modal-body" style="position:relative">
					<div class="qrcode-box" style="position:absolute;left:50%;transform:translateX(-50%);width:300px;height:300px">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
					<video style="width: 100%;height:300px"></video>
					<canvas class="hidden" width="300" height="300"></canvas>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="index.js"></script>

	</body>

</html>